<template>
  <div class="global-footer">
    <!-- PC端 -->
    <div class="button-sty" v-if="!isMobile">
      <div class="gutter-box3" v-for="(item, index) in buttonList" :key="index">
        <div class="gutter-title1">{{ item.title }}</div>
        <div v-for="(val, index) in item.link" :key="index">
          <!-- <div class="gutter-text1"><a :href="`/help`" target="_self" :title="val.name">{{ val.name }}</a></div> -->
          <div class="gutter-text1"><a :href="val.url" target="_self" :title="val.name">{{ val.name }}</a></div>
        </div>
      </div>
      <!-- 提交按钮 -->
      <div class="gutter-box3">
        <div class="gutter-title1">NEWSLETTER</div>
        <div class="gutter-text2">Subscribe For Up To $10 Off Your First Order.</div>
        <div style="display: flex;">
          <a-input v-model:value="email" style="height: 44px;border-radius: 0;" placeholder="Please enter email" />
          <div class="submit-button" @click="emailSubmit">SUBMIT</div>
        </div>
        <!-- 社交网络 -->
        <div class="social-icons">
          <div v-for="(item, index) in joinWay" :key="index">
            <img :src="item.icon" alt="facebook" class="icon" @click="toJoinWeb(item.url)">
          </div>
        </div>
      </div>
    </div>
    <!-- 移动端 -->
    <div v-else>
      <div class="filter-item" v-for="item in buttonList" :key="item.id">
        <div class="filter-button" @click.stop="toggleCategory(item.id)">
          <span class="gutter-title1" style="margin-bottom: 0px;">{{ item.title }}</span>
          <span class="arrow" :class="{ 'arrow-up': showCategory[item.id] }">
            <DownOutlined />
          </span>
        </div>
        <div v-for="(val, index) in item.link" :key="index">
          <div class="gutter-text4" v-show="showCategory[item.id]"><a :href="`/help`" target="_self"
              :title="val.name">{{ val.name }}</a></div>
        </div>
      </div>
    </div>

    <div class="icon-sty">
      <!-- 版权 -->
      <a-row>
        <a-col class="footer-text">Copyright ©2025 LUNRUO – All rights reserved.</a-col>
      </a-row>
      <!-- 支付 -->
      <div class="section-img">
        <div class="section-icon" v-for="(item, index) in payMethods" :key="index">
          <img :src="item.icon" alt="facebook" class="icon">
        </div>
      </div>
    </div>

  </div>
  <!-- 验证邮箱验证码弹框 -->
  <a-modal v-model:visible="emailVisible" title="Verify your email" @ok="handleOk" :footer="null">
    <VerifyEmail :email=email @dialogVisible="handleDialogVisible" />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { UserOutlined, GlobalOutlined, MobileOutlined } from '@ant-design/icons-vue'
import SVG_ICONS from "@/assets/SVG_ICONS.ts";
import { useRouter } from 'vue-router';
import { getSetting } from '@/api/index';
import { Local } from "@/utils/storage.ts";
import { getToken } from "@/utils/auth"
import { DownOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import VerifyEmail from "@/components/VerifyEmail.vue"


const router = useRouter()
const isLogin = getToken()
const userInfo = Local.get('userInfo');
// 加入方式
const joinWay = ref([
  {
    name: 'Facebook',
    icon: SVG_ICONS.facebook,
    url: ''
  },
  {
    name: 'Ins',
    icon: SVG_ICONS.ins,
    url: ''
  },
  {
    name: 'TikTok',
    icon: SVG_ICONS.tiktok,
    url: ''
  },
  // {
  //   name: 'Twitter',
  //   icon: SVG_ICONS.twitter,
  //   url: ''
  // },
  // {
  //   name: 'Pinterest',
  //   icon: SVG_ICONS.pinterest,
  //   url: ''
  // },
  // {
  //   name: 'YouTube',
  //   icon: SVG_ICONS.youtube,
  //   url: ''
  // },
])
// 支付方式
const payMethods = [
  {
    name: 'credit',
    icon: SVG_ICONS.credit,
  },
  {
    name: 'mastercard',
    icon: SVG_ICONS.mastercard
  },
  {
    name: 'visa',
    icon: SVG_ICONS.visa
  },
  {
    name: 'discover',
    icon: SVG_ICONS.discover
  },
  {
    name: 'americanexpress',
    icon: SVG_ICONS.americanexpress
  },
  {
    name: 'klarna',
    icon: SVG_ICONS.klarna
  },
  {
    name: 'dcma',
    icon: SVG_ICONS.dcma
  }
]
const buttonList = ref([
  {
    id: '1',
    title: 'LUNRUO',
    link: [
      {
        id: '101',
        name: 'About Us',
        url: '/story'
      },
      {
        id: '102',
        name: 'Contact Us',
        url: '/help/other/contact-us?key=contact_us&title=Contact Us'
      },
      {
        id: '103',
        name: 'Sustainability',
        url: '/sustainability'
      },
      {
        id: '104',
        name: 'Rewards',
        url: '/user/points'
      },
      {
        id: '105',
        name: 'Blog',
        url: '/blog-post'
      },

    ]
  },
  {
    id: '2',
    title: 'SERVICE',
    link: [
      {
        id: '201',
        name: 'Shipping Policy',
       url: '/help'
      },
      {
        id: '202',
        name: 'Return & Refund Policy',
        url: '/help'
      },
      // {
      //   id: '203',
      //   name: 'Terms of Service',
      //   url: '/termsService'
      // },
      {
        id: '204',
        name: 'Privacy Policy',
        url: '/privacypolicy'
      },
      {
        id: '205',
        name: 'Track Order',
        url: '/user/orders'
      },
      {
        id: '206',
        name: 'FAQs',
        url: '/FAQs'
      }
    ]
  },
  // {
  //   id: '3',
  //   title: 'NEWSLETTER',
  // },
])
onMounted(() => {
  // getConfig()
  checkMobile();
  window.addEventListener('resize', checkMobile);
})
onUnmounted(() => {
  window.removeEventListener('resize', checkMobile);
});
const isMobile = ref(false);

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 390;
};
// 展开/收起状态
const showCategory = ref<Record<string, boolean>>({});
// 切换展开/收起
const toggleCategory = (categoryId: string) => {
  console.log('Before toggle:', showCategory.value);
  showCategory.value[categoryId] = !showCategory.value[categoryId];
  console.log('After toggle:', showCategory.value);
};
// 社交网络跳转
const toJoinWeb = (url: string) => {
  window.location.href = url
}
// api获取配置信息
const getConfig = async () => {
  const res = await getSetting()
  if (res.code === 200) {
    Local.set('config', res.result)

    // joinWay.value = joinWay.value.map(item => {
    //   const key = item.name.toLowerCase();
    //   if (res.result.socialcontact[key]) {
    //     item.url = res.result.socialcontact[key];
    //   }
    //   return item;
    // });
    // Local.set('config', {
    //   data: res.data,
    //   timestamp: Date.now()
    // });
  }
}
// 邮箱验证
const email = ref('')
const emailVisible = ref(false)
const handleOk = (e: MouseEvent) => {
  emailVisible.value = false;
};
const emailSubmit = async () => {
  emailVisible.value = true
  // 这里可以加邮箱校验和提交逻辑
  // alert('Claimed: ' + email.value)
  // const res = await postVerifyEmail({email:email.value})
  // if(res.data == 200){
  //   message.success('Email verification successful')
  //   visible.value = false
  // }else{
  //   message.error('Email verification failed')
  // }
}
// 处理弹框显示和隐藏
const handleDialogVisible = (visible) => {
  emailVisible.value = visible;
};
</script>

<style lang="scss" scoped>
.global-footer {
  margin-top: auto;
  position: relative;
  bottom: 0;
  left: 0;
  background-color: #f7ede7;
}

.submit-button {
  width: 200px;
  color: #FFF;
  border: 1px solid #ae8877;
  background-color: #ae8877;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-left: 10px;
  line-height: 40px;
}

.gutter-box3 {
  text-align: left;
  padding: 40px 85px;
}

.gutter-text1:hover {
  text-decoration: underline;
}


.gutter-title1 {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ae8877;
}


.gutter-text1 {
  color: #707979;
  font-size: 12px;
  margin-bottom: 10px;
  cursor: pointer;
}

.gutter-text2{
  color: #707979;
  font-size: 12px;
  margin-bottom: 10px; 
}

.gutter-text4 {
  color: #000000;
  font-size: 0.75rem;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
  padding-left: 12px;
}

.button-sty {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.social-icons {
  margin-top: 45px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;

  .icon {
    width: 30px;
    height: 30px;

    &:hover {
      cursor: pointer;
    }
  }

  .icon-item {
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: #409eff;
    }
  }
}

.icon-sty {
  border-top: none;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0 30px 0;
  margin: 0 auto;
  // background-color: #FFF;
}


.section-img {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-left: 235px;

  .section-icon {

    .icon {
      width: 48px;
      height: 32px;
      margin: 0 8px;
    }
  }


}

.footer-text {
  text-align: center;
  letter-spacing: 0.12px;
  line-height: 1.5;
  padding: 10px 0;
  font-size: 12px;
  color: #707979;
}

@media screen and (max-width: 768px) {

  .button-sty {
    flex-direction: column;
    align-items: center;
  }

  .gutter-box3 {
    padding: 0.8rem 20px;
    text-align: center;
  }

  .social-icons {
    gap: 15px;
  }

  .section-img {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}

@media screen and (max-width: 480px) {

  .gutter-title1 {
    font-size: 0.7rem;
  }


  .gutter-text1 {
    font-size: 0.7rem;
  }


  .footer-text {
    font-size: 10px;
    padding: 5px 10px;
  }

  .social-icons .icon {
    width: 25px;
    height: 25px;
  }

  .section-img .section-icon .icon {
    width: 35px;
    height: 22px;
    margin: 0 3px;
  }
}

.filter-item {
  position: relative;
  flex: 1;
  height: 100%;

  border-bottom: 1px solid rgb(238, 238, 238);

  &:last-child {
    border-bottom: 0;
  }

  &.active {
    .checkbox-label {
      font-weight: 500;
    }
  }

  .more-filter>span {
    cursor: pointer;
    color: #282828;
    font-size: 12px;
    display: block;
    text-align: center;
    font-weight: bold;
    display: block;
    width: 100%;
    line-height: 30px;
  }
}

.filter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 14px 12px;
  padding-right: 30px;
  transition: all 0.3s ease;

  .arrow {
    font-size: 10px;
    transition: transform 0.3s;

    &.arrow-up {
      transform: rotate(180deg);
    }
  }
}

.gutter-text4:hover {
  text-decoration: underline;
}
</style>